<template>
  <van-nav-bar>
    <template #left>
      <h3>课程学习</h3>
    </template>
    <template #right>
      <van-icon name="chat-o" size="24" badge="9" />
    </template>
  </van-nav-bar>

  <div id="course">
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了">
      <div class="card" v-for="item in courseList" @click="toCourseCatalogueHandle(item.id)">
        <img :src="item.bannerUrl" alt=""/>
        <div class="content">
          <div class="title">{{item.courseName}}</div>
          <div class="desc">
            <span>{{item.courseDesc}}</span>
            <span>{{item.buyNum}}人购买</span>
          </div>
          <div class="footer">
            <div class="avatar" v-if="item.headImgUrls ===null">
              <van-image round width="2rem" height="2rem" src="" />
            </div>
            <div class="avatar" v-if="item.headImgUrls !== 0">
              <van-image round v-for="headImgUrl in item.headImgUrls" width="2rem" height="2rem" :src="headImgUrl" />
            </div>
            <div class="price">
              <span class="present-price">￥{{item.presentPrice}}</span>
              <span class="old-price">￥{{item.price}}</span>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
  <TabBar />
</template>

<script>
import TabBar from "@/components/layout/tab-bar";
import { onBeforeMount, reactive, toRefs } from "vue";
import { useRouter } from "vue-router"
import { getCourseList } from "@/api/course";
import { Toast } from "vant"
export default {
  components: { TabBar },
  setup() {
    const router = useRouter()
    const state = reactive({
      courseList: [],
      loading: true,
      finished: true,
    });

    onBeforeMount(()=> {
      getCourseList().then(({data: res}) => {
        if (res.code !==0){
          return Toast.fail(res.msg)
        }
        state.courseList= res.data
        state.loading= true
      })
    })

    const toCourseCatalogueHandle =(id) =>{
      router.push({ name: 'course-catalogue', params: { id }})
    }

    return {
      ...toRefs(state),
      toCourseCatalogueHandle
    };
  },
}
</script>

<style lang="less" scoped>

#course {
  margin: 0 12px 12px;
}

.card {
  width: 100%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
  //border-radius: 4px;
  display: inline-block;
  margin-bottom: 16px;
  img {
    /*max-height: 218px;*/
    //height: 11.5rem;
    width: 100%;
  }
  .content{
    text-align: left;
    padding: 5px;
    font-size: 16px;
    .title {
      //font-size: 16px;
    }
    .desc {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: #BFBFBF;
      margin-top: 5px;
    }
    .footer{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 5px;
      .avatar {
        .van-image{
          margin-right: .4rem
        }
      }
      .price {
        .present-price {
          color: #ed5a65
        }
        .old-price{
          font-size:14px;
          text-decoration:line-through;
          color: #BFBFBF
        }
      }
    }
  }
}
</style>
